// 临床护理
<template>
  <div class="lchl_box" id="clinical_nurse"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'ClinicalNurse',
  props: {
    nursingType: Number
  },
  data () {
    return {
      arrX: [ '生命体征监测', '药物喂服  ', '血糖监测', '开塞露/直肠栓剂 ', '皮下注射', '导尿（女性）', '吸氧',
        '物理降温  ', '鼻饲', '肌肉注射', '压疮伤口换药', '静脉血标本采集', '灌肠', '造口护理', 'PICC'],
      arrY: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      hlx: [],
      xqsl: []
    }
  },
  mounted () {
    this.GeriatricNursingHandle()
    this.charts(this.arrX, this.arrY)
  },
  methods: {
    GeriatricNursingHandle () {
      this.$http.post(this.$api.GeriatricNursing.geriatricNursing, 'hllx=' + this.nursingType, true).then(result => {
        let arr = result.data.result
        for (const hlxlist of arr.values()) {
          this.hlx.push(hlxlist.hlx)
          this.xqsl.push(hlxlist.xqsl)
        }
        this.charts(this.hlx, this.xqsl)
      })
    },
    charts (arrX, arrY) {
      let myChart = echarts.init(document.getElementById('clinical_nurse'))
      myChart.setOption({
        title: {
          text: '临床护理',
          textStyle: {
            color: '#fff',
            fontSize: 30
          },
          top: '8%',
          left: '5%'
        },
        grid: {
          left: '6%',
          right: '6%',
          top: '18%',
          bottom: '8%',
          containLabel: true
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              show: true,
              alignWithLabel: true,
              interval: 0,
              rotate: 40,
              textStyle: {
                color: '#ffffff', // 坐标字体颜色
                fontSize: 14
              }
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff' // x坐标轴颜色
              }
            },
            data: arrX
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              // 坐标轴线条相关设置(颜色等)
              lineStyle: {
                color: '#60707F' // y轴颜色
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#60707F',
                fontSize: 24
              }
            },
            splitLine: {
              lineStyle: {
                color: '#60707F' // 分隔线颜色设置
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '30',
            itemStyle: {
              normal: {
                color: '#2d7df1',
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white',
                    fontSize: 18
                  }
                }
              }
            },
            data: arrY
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.lchl_box{
  width: 95%;
  height: 90%;
  position: absolute;
  left: 1rem;
  top: 1.5rem;
}
</style>
